<template>
  <el-form ref="basicInfoForm" :model="info" :rules="rules" label-width="150px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="模型名称" prop="modelName">
          <el-input placeholder="请输入模型名称" v-model="info.modelName" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="表描述" prop="modelComment">
          <el-input placeholder="请输入" v-model="info.modelComment" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="功能名称" prop="funcName">
          <el-input v-model="info.funcName" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="实体类名称" prop="className">
          <el-input placeholder="请输入实体类名称" v-model="info.className" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="作者" prop="codeAuthor">
          <el-input placeholder="请输入" v-model="info.codeAuthor" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="pagesize">
          <span slot="label">
            分页大小
            <el-tooltip content="每页大小，0为不分页，默认20条每页" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </span>
          <el-input v-model="info.pagesize" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="toolbar">
          <span slot="label">
            工具栏
            <el-tooltip content="支持的功能，增删改查等" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </span>
          <el-input v-model="info.toolbar" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="actionBar">
          <span slot="label">
            操作栏
            <el-tooltip content="支持的功能，增删改查等" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </span>
          <el-input v-model="info.actionBar" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="function">
          <span slot="label">
            开启回收站
            <el-tooltip content="开启回收站功能" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </span>
          <el-radio v-model="info.genType" label="0">开启</el-radio>
          <el-radio v-model="info.genType" label="1">关闭</el-radio>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="function">
          <span slot="label">
            页面布局
            <el-tooltip content="页面布局" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </span>
          <el-input v-model="info.function" placeholder="单表，左右，左右(上下)" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="function">
          <span slot="label">
            菜单图标
            <el-tooltip content="页面布局" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </span>
          <el-input v-model="info.function" placeholder="单表，左右，左右(上下)" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="function">
          <span slot="label">
            父菜单
            <el-tooltip content="父菜单" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </span>
          <el-input v-model="info.function" placeholder="单表，左右，左右(上下)" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="function">
          <span slot="label">
            表单类型
            <el-tooltip content="是否支持上传文件功能，用于控制表单的提交类型" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </span>
          <el-select v-model="info.formType">
            <el-option label="application/x-www-form-urlencoded" value="application/x-www-form-urlencoded" />
            <el-option label="multipart/form-data" value="multipart/form-data" />
            <el-option label="application/json" value="application/json" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="frontendType">
          <span slot="label">
            前端框架
            <el-tooltip content="antd、element" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </span>
          <el-select v-model="info.frontendType">
            <el-option label="antd (React)" value="antd" />
            <el-option label="elemennt-ui(VUE)" value="elemennt-ui" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :rows="3" v-model="info.remark"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: 'BasicInfoForm',
  props: {
    info: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      rules: {
        tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
        tableComment: [{ required: true, message: '请输入表描述', trigger: 'blur' }],
        className: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }],
        functionAuthor: [{ required: true, message: '请输入作者', trigger: 'blur' }],
      },
    };
  },
};
</script>
